﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Web Camera</title>
	<link rel="stylesheet" href="jquery/css/jquery.ui.all.css" />
	<link rel="stylesheet" href="css/common.css" />
	<script src="jquery/jquery-1.9.1.min.js"></script>
	<script src="jquery/jquery.ui.core.js"></script>
	<script src="jquery/jquery.ui.widget.js"></script>
	<script src="jquery/jquery.ui.mouse.js"></script>
	<script src="jquery/jquery.ui.slider.js"></script>
	<script src="jquery/json2.js"></script>
	<script src="js/network.js"></script>
	<script src="js/common.js"></script>
	<script src="js/plugin.js"></script>
	<script src="js/videomask.js"></script>
</head>
<script  type="text/javascript"> 
document.write(GetLanguagePathStr());
</script> 
<body>   
<div class="ContentDiv"  style="min-width:600px;">
	<div style="width:100px;height:30px;"></div>
	 <div style="height:100%;margin:auto;width:600px;" id="id_BoxPIC">
		<div  style="width:352px;height:288px;display:block;z-index:99;background:black;opacity:1;" id="id_plugin_img">
			<img  style="width:352px;height:288px;z-index:1;position:absolute;margin-top:0px;" src="" id="id_pic" ondragstart="return false;"></img>
			<div class="osdPositonBox"  id="id_timeosdPositonBox">时间</div>
			<div class="osdPositonBox"  id="id_fpsosdPositonBox">帧率码率</div>
			<div class="osdPositonBox"  id="id_chnnameosdPositonBox">通道名称</div>
			<div class="osdPositonBox"  id="id_usrdefosdPositonBox">用户自定义消息</div>
		</div>		
		<div style="height:20px;"></div>
		<div class="DivCheckBox" style="float:left;margin-top:5px;" id="id_OsdTimeEnable"><script>InitCheckBox('id_OsdTimeEnable','true')</script></div>
		<div class="DivLable" style="float:left;margin-left:10px;" id="id_txtDisplayTime">显示时间</div>
		<div style="clear:both;"/>
		<div style="height:5px;"></div>
		<div class="DivCheckBox" style="float:left;margin-top:5px;" id="id_OsdFpsEnable"><script>InitCheckBox('id_OsdFpsEnable','true')</script></div>
		<div class="DivLable" style="float:left;margin-left:10px;" id="id_txtDisplayFps">显示帧率</div>
		<div style="clear:both;"/>
		<div style="height:5px;"></div>
		<div class="DivCheckBox" style="float:left;margin-top:5px;" id="id_OsdChnNameEnable"><script>InitCheckBox('id_OsdChnNameEnable','true')</script></div>
		<div class="DivLable" style="float:left;margin-left:10px;width:200px;" id="id_txtChnAndName">显示通道名称</div>
		<input class="DivInput" id="id_OsdChnName" value="通道名称" maxlength="16"></input>
		<div style="clear:both;"/>
		<div style="height:5px;"></div>
		<div class="DivCheckBox" style="float:left;margin-top:5px;" id="id_OsdUsrDefineEnable"><script>InitCheckBox('id_OsdUsrDefineEnable','true')</script></div>
		<div class="DivLable" style="float:left;margin-left:10px;width:200px;" id="id_txtUsrdef">显示用户自定义消息</div>
		<input class="DivInput" id="id_UsrDefineMsg" value="用户自定义消息" maxlength="16" ></input>
		<div style="clear:both;"/>
		<div style="height:20px;"></div>
		<div>
		<div class="DivButton" style="margin-left:200px;" id="id_SubmitOsd">提交</div>
		</div>
	</div> 
</div>
</body>   

<style type="text/css">
.ContentDiv{
	background:#1c1d22;
	left:0px;
	right:0px;
	height:510px;
}
.osdPositonBox{
	width:200px;
	height:23px;
	z-index:2;
	position:absolute;
	border:1px solid yellow; 
	font-family:arial;
	font-size:15px;
	line-height: 23px;
	color:red;
	cursor: pointer;
}
</style> 

<script  type="text/javascript"> 
var ClassDrag = function(id){  
		this.id = id;
        var drageState = false;  
		
		this.dragStart = function EventCall_Dragstart(ev)
		{
			drageState = true;
		}

		this.dragEnd = function EventCall_Dragend(ev)
		{
			drageState = false;
		}
		
		this.initBox = function initBox(fatherID,RelationX,RelationY)
		{
			//alert("fatherID = "+fatherID+"RelationX = "+RelationX+"RelationY = "+RelationY);
			var fatherObj = document.getElementById(fatherID);
			var x = RelationX+ fatherObj.getBoundingClientRect().left +  $("#"+id).width()/2;
			var y = RelationY+ fatherObj.getBoundingClientRect().top +  $("#"+id).height()/2;
			if(false == DragRuls(fatherID,id,x,y)) return ;
			
			//document.getElementById(id).style.left = fatherObj.getBoundingClientRect().left + RelationX + 'px';
			//document.getElementById(id).style.top =  fatherObj.getBoundingClientRect().top + RelationY + 'px';
		//	alert("x = "+document.getElementById(id).style.left+"Y = "+document.getElementById(id).style.top);

			//document.getElementById(id).style.left = x + 'px';
			//document.getElementById(id).style.top = y + 'px';
			document.getElementById(id).style.marginLeft = RelationX + 'px';
			document.getElementById(id).style.marginTop = RelationY + 'px';
		}
		
		this.GetX = function GetX(){
			//alert(document.getElementById(id).style.marginLeft);
			if(document.getElementById(id).style.marginLeft == "0px"){
				return 0;
			}
			return parseInt(document.getElementById(id).style.marginLeft);
		}
		this.GetY = function GetY(){
			if(document.getElementById(id).style.marginTop == "0px"){
				return 0;
			}
			return parseInt(document.getElementById(id).style.marginTop);
		}
		this.drag =function EventCall_Drag(ev)
		{
			if(drageState == false) return;
			var fatherObj = document.getElementById(this.id);
			var x = ev.pageX; 
			var y = ev.pageY;
			if(false == DragRuls(this.id,id,x,y)) return ;
			//document.getElementById(id).style.left = (x - $("#"+id).width()/2)+ 'px';
			//document.getElementById(id).style.top =  (y - $("#"+id).height()/2) + 'px';
			//console.log((x - $("#"+id).width()/2 -  fatherObj.getBoundingClientRect().left));
			document.getElementById(id).style.marginLeft = (x - $("#"+id).width()/2 -  fatherObj.getBoundingClientRect().left) + 'px';
			document.getElementById(id).style.marginTop =  (y - $("#"+id).height()/2 -  fatherObj.getBoundingClientRect().top) + 'px';
		
		}
	
		
		function DragRuls(fatherWindID,id,x,y)
		{
			var fatherObj = document.getElementById(fatherWindID);
			var MaxW = fatherObj.getBoundingClientRect().left + $("#"+fatherWindID).width() - $("#"+id).width()/2;
			var MaxH = fatherObj.getBoundingClientRect().top +  $("#"+fatherWindID).height() - $("#"+id).height()/2;
			var MinW = fatherObj.getBoundingClientRect().left + $("#"+id).width()/2;
			var MinH = fatherObj.getBoundingClientRect().top +  $("#"+id).height()/2;
			//console.log("MaxW = "+MaxW+"MaxH ="+MaxH);	
			if(x > MaxW || x < MinW){
				return false;
			}
			
			if(y > MaxH || y < MinH){
				return false;
			}
			return true;
		}
}

var timeosdPositonBox;
var fpsosdPositonBox;
var chnnameosdPositonBox;
var usrdefosdPositonBox;
  

function ReSizeWondow(OsdMap)
{
	timeosdPositonBox.initBox('id_plugin_img',1,1);
	fpsosdPositonBox.initBox('id_plugin_img',1,1);
	chnnameosdPositonBox.initBox('id_plugin_img',1,1);
	usrdefosdPositonBox.initBox('id_plugin_img',1,1);
}


function registerDragEvent(obj)
{
	registerEventById(obj.id,'mousedown', obj.dragStart);
	registerEventById(obj.id,'mouseup', obj.dragEnd);
	registerEventById("id_plugin_img",'mousemove', obj.drag);
}

var httpport = 80;
function GetPort()
{
	var resp = $.sendMsg("ThirdServer",null,"/ISAPI/Network/ExtServerParam","POST");
	if(resp.success == false){
		//alert("recv ThirdServer msg fail");
		return;  
	}
	var map = resp.data;
	console.log( JSON.stringify(map));
	return  Number(map.option_1.port);
}
	

function updateBgPic()
{
	var ip = GetIp();  
	var usr = $.GetCookie('usrname');
	var passwd = $.GetCookie('password');
	//var str = 'http://'+usr+':'+passwd+'@'+ip+'/ISAPI/Snap/GetImg'+Math.random();
	var str = 	'http://'+ip+':'+httpport+'/ISAPI/Snap/GetImg'+Math.random();
	//console.log(str);
	document.getElementById('id_pic').src = str;
}

function SubmitOsd()
{
	var map = [{"xtype":"osdparam_0","items":[{"xtype":"osdtype","text":"0"},{"xtype":"position","items":[{"xtype":"channame","text":document.getElementById('id_OsdChnName').value},{"xtype":"osdenable","text":CheckboxToInt(GetCheckBoxValue('id_OsdChnNameEnable'))},{"xtype":"x","text":""+chnnameosdPositonBox.GetX()},{"xtype":"y","text":""+chnnameosdPositonBox.GetY()}]}]},
			   {"xtype":"osdparam_1","items":[{"xtype":"osdtype","text":"1"},{"xtype":"position","items":[{"xtype":"osdenable","text":CheckboxToInt(GetCheckBoxValue('id_OsdTimeEnable'))},{"xtype":"x","text":""+timeosdPositonBox.GetX()},{"xtype":"y","text":""+timeosdPositonBox.GetY()}]}]},
			   {"xtype":"osdparam_2","items":[{"xtype":"osdtype","text":"2"},{"xtype":"position","items":[{"xtype":"osdenable","text":CheckboxToInt(GetCheckBoxValue('id_OsdFpsEnable'))},{"xtype":"x","text":""+fpsosdPositonBox.GetX()},{"xtype":"y","text":""+fpsosdPositonBox.GetY()}]}]},
			   {"xtype":"osdparam_3","items":[{"xtype":"osdtype","text":"3"},{"xtype":"position","items":[{"xtype":"otherinfo","text":document.getElementById('id_UsrDefineMsg').value},{"xtype":"osdenable","text":CheckboxToInt(GetCheckBoxValue('id_OsdUsrDefineEnable'))},{"xtype":"x","text":""+usrdefosdPositonBox.GetX()},{"xtype":"y","text":""+usrdefosdPositonBox.GetY()}]}]}];

    document.getElementById('id_chnnameosdPositonBox').innerHTML  = document.getElementById('id_OsdChnName').value;
	document.getElementById('id_usrdefosdPositonBox').innerHTML  =  document.getElementById('id_UsrDefineMsg').value;

	var resp = $.sendMsg("OSDInfo",map,"/ISAPI/OSD/OSDInfo","PUT");
	if(resp.success == false){
		alert("Set fail");
		return ;
	}else{
		alert(str_SetSuccess);
		return ;
	}
	 
}
function SetParamAvalible(map)
{
	var obj;
	switch(map.osdtype){
		case "0":
			obj = chnnameosdPositonBox;
			document.getElementById('id_OsdChnName').value  = map.position.channame;
			document.getElementById('id_chnnameosdPositonBox').innerHTML  = map.position.channame;
			SetCheckBox('id_OsdChnNameEnable',TranslationStrAndBool(map.position.osdenable));
			break;
		case "1":
			obj = timeosdPositonBox;
			SetCheckBox('id_OsdTimeEnable',TranslationStrAndBool(map.position.osdenable));
			break;
		case "2":
			obj = fpsosdPositonBox;
			SetCheckBox('id_OsdFpsEnable',TranslationStrAndBool(map.position.osdenable));
			break;
		case "3":
			obj = usrdefosdPositonBox;
			document.getElementById('id_UsrDefineMsg').value  = map.position.otherinfo;
			document.getElementById('id_usrdefosdPositonBox').innerHTML  =  map.position.otherinfo;
			SetCheckBox('id_OsdUsrDefineEnable',TranslationStrAndBool(map.position.osdenable));
			break;
		default: return;
	}

	obj.initBox('id_plugin_img',Number(map.position.x),Number(map.position.y));
}
function InitParam()
{
	var resp = $.sendMsg("OSDInfo",null,"/ISAPI/OSD/OSDInfo","POST");
	if(resp.success == false){
		alert("Get OSDInfo fail");
		return ;
	}
	var map = resp.data;
	//var map ={"osdparam":{"osdtype":"3","position":{"x":"0","y":"141"}}};
	//console.log("map ="+JSON.stringify(map));
	//map ={"osdparam_0":{"osdtype":"0","position":{"x":"0","y":"0"}},"osdparam_1":{"osdtype":"1","position":{"x":"0","y":"43"}},"osdparam_2":{"osdtype":"2","position":{"x":"0","y":"92"}},"osdparam_3":{"osdtype":"3","position":{"x":"0","y":"141"}}};
	if(map.osdparam_0 != undefined){
		SetParamAvalible(map.osdparam_0);
	}
	if(map.osdparam_1 != undefined){ 
		SetParamAvalible(map.osdparam_1);
	}
	if(map.osdparam_2 != undefined){
		SetParamAvalible(map.osdparam_2);
	}
	if(map.osdparam_3 != undefined){
		SetParamAvalible(map.osdparam_3);
	}
	
}

$(window).resize(function() {    
	//ReSizeWondow();
});

function InitLang(){
	SetLang('id_timeosdPositonBox',str_ShowTime);
	SetLang('id_fpsosdPositonBox',str_ShowFps);
	SetLang('id_chnnameosdPositonBox',str_ShowChannel);
	SetLang('id_usrdefosdPositonBox',str_ShowUserInfo);
	SetLang('id_txtDisplayTime',str_ShowTime);
	SetLang('id_txtDisplayFps',str_ShowFps);
	SetLang('id_txtChnAndName',str_ShowChannel);
	SetLang('id_txtUsrdef',str_ShowUserInfo);
	SetLang('id_SubmitOsd',str_Save);
}

function ChnAndName(){
	console.log('11111111');
}

function Usrdef(){
	console.log('22222222');
}

$(function() {//页面初始化
	drag_sx = document.getElementById('id_plugin_img').getBoundingClientRect().left;
	drag_sy = document.getElementById('id_plugin_img').getBoundingClientRect().top;
	
	timeosdPositonBox = new ClassDrag('id_timeosdPositonBox');
	fpsosdPositonBox = new ClassDrag("id_fpsosdPositonBox");
	chnnameosdPositonBox = new ClassDrag("id_chnnameosdPositonBox");
	usrdefosdPositonBox = new ClassDrag("id_usrdefosdPositonBox");
		
	registerDragEvent(timeosdPositonBox);
	registerDragEvent(fpsosdPositonBox);
	registerDragEvent(chnnameosdPositonBox);
	registerDragEvent(usrdefosdPositonBox);
	
	registerEventById("id_SubmitOsd",'mousedown', SubmitOsd);
	BindEvent('id_OsdChnName','onchange',ChnAndName,null);
	BindEvent('id_UsrDefineMsg','onchange',Usrdef,null);
	InitLang();
	InitParam();
	httpport = GetPort();
	setInterval("updateBgPic()",200);
	//ReSizeWondow();
	updateBgPic();

});
</script>

</html>  